<template>
  <div id="shengxstj">
    <div id="area">
      <div class="area01">
        <span>省：</span>
        <el-select v-model="value" placeholder="全部省份">
          <el-option
            v-for="item in cities"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.value
            }}</span>
          </el-option>
        </el-select>
        <span>市：</span>
        <el-select v-model="value" placeholder="全部市">
          <el-option
            v-for="item in cities"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.value
            }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="area02"></div>
    </div>
    <div id="pers">
      <div class="block">
        <span class="demonstration">年</span>
        <el-date-picker v-model="value3" type="year" placeholder="请选择年份">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">月</span>
        <el-date-picker v-model="value2" type="month" placeholder="请选择月份">
        </el-date-picker>
      </div>
    </div>
    <div id="sort">
      <span>销量排序：</span>
      <el-radio-group v-model="radio">
        <el-radio :label="3">全部</el-radio>
        <el-radio :label="6">降序</el-radio>
        <el-radio :label="9">升序</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <el-tabs type="border-card">
        <el-tab-pane label="合伙人">
          <el-table
            :data="tableData"
            style="width: 100%"
            border
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column prop="date" label="省" sortable width="350">
            </el-table-column>
            <el-table-column prop="name" label="市" sortable width="350">
            </el-table-column>
            <el-table-column prop="num" label="总活跃度" sortable width="350">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="大客户">
          <el-table
            :data="tableData"
            style="width: 100%"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column prop="date" label="省" sortable width="350">
            </el-table-column>
            <el-table-column prop="name" label="市" sortable width="350">
            </el-table-column>
            <el-table-column prop="num" label="总活跃度" sortable width="350">
            </el-table-column> </el-table
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: 3,

      value1: "",
      value2: "",
      cities: [
        {
          value: "Beijing",
          label: "北京",
        },
        {
          value: "Shanghai",
          label: "上海",
        },
        {
          value: "Nanjing",
          label: "南京",
        },
        {
          value: "Chengdu",
          label: "成都",
        },
        {
          value: "Shenzhen",
          label: "深圳",
        },
        {
          value: "Guangzhou",
          label: "广州",
        },
      ],
      value: "",
      tableData: [
        {
          date: "浙江",
          name: "杭州",
          num:"9"
        },
        {
          date: "广东",
          name: "广州",
          num:"9"
        },
        {
          date: "浙江",
          name: "绍兴",
          num:"2"
        },
      ],
    };
  },
};
</script>
<style scoped>
/* #shengxstj{
  text-align: center;
} */
/* *{
    text-align: center;
} */
* {
  text-align: left;
}
#sort {
  display: flex;
  margin: 30px;
  align-items: center;
}
#pers {
  display: flex;
  margin: 30px 0 0 30px;
}
.card {
  display: inline-block;
  background-color: #e9eef3;
  display: flex;
  margin: 30px;
}
.el-table__header {
  width: 100% !important;
}
.el-table__body {
  width: 100% !important;
}
#area {
  margin-left: 30px;
}
.area01 {
  margin-right: 30px;
  width: 700px;
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.area02 {
  width: 450px;
  display: flex;
  align-items: center;
  display: inline-block;
}
.box {
  display: flex;
  margin: 30px;
}
</style>